<route>
    {
        meta: {
            layout: 'nepu',
            title:'科研获奖'
        }
    }
  </route>
<template>
    <view>
        <Uploader @confirm="openUploader"></Uploader>
        <InnerTable :data="tableData" @delete="handleDelete" @update="handleUpdate"></InnerTable>
        <a-divider></a-divider>
        <AntdZh>
            <a-pagination v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
                @change="getList" />
        </AntdZh>
        <!--上传 / 修改 Modal-->
        <AntdConfirmModal :title="isCreate ? '新建' : '修改'" ref="modalRef" width="800px" :keepSlot="false"
            @confirm="submitForm">
            <template #header v-if="isCreate">
                <a-row>
                    <a-col :span="2">
                        <a-tooltip title="暂存">
                            <a-button shape="circle" size="large" @click="tapStore">
                                <template #icon>
                                    <VerticalAlignBottomOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                    <a-col :span="2">
                        <a-tooltip title="历史草稿">
                            <a-button shape="circle" size="large" @click="showDrafts">
                                <template #icon>
                                    <HistoryOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                </a-row>
            </template>
            <a-form ref="formRef" :model="form" name="basic" :label-col="{ span: 8 }">
                <view v-if="isCreate">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="选择获奖" name="awardDictId" :rules="[{ required: true, message: '请选择获奖类别' }]">
                                <!-- <RawandSelect v-model:value="form.awardDictId"></RawandSelect> -->
                                <a-cascader v-model:value="valueId" :options="dicts" placeholder="请选择获奖"
                                    style="width: 250px" @change="confirmAward" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="科研获奖名称" name="awardName" :rules="[{ required: true, message: '请输入成果名称' }]">
                                <a-input v-model:value="form.awardName" style="width: 250px" placeholder="请输入成果名称" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="负责人" name="leader" :rules="[{ required: true, message: '请输入负责人' }]">
                                <LoginUserCell v-model:userId="form.leaderId" v-model:nickName="form.leader"
                                    style="width: 250px">
                                </LoginUserCell>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="署名单位" name="signatureGrade"
                                :rules="[{ required: true, message: '请输入署名单位' }]">
                                <a-cascader v-model:value="form.signatureGrade" :options="signatureGrade.options"
                                    placeholder="请选择署名单位" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="参与成员" name="userIdList" :rules="[{ required: true, message: '请选择参与成员' }]">
                                <AntdUserMulSelect v-model:value="form.userIdList" style="width: 250px"></AntdUserMulSelect>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="上传附件">
                                <a-upload-dragger v-model:fileList="fileList" name="file" :action="url"
                                    @change="handleChange" :headers="headerConfig" @drop="handleDrop" :max-count="1">
                                    <p class="ant-upload-drag-icon">
                                        <inbox-outlined></inbox-outlined>
                                    </p>
                                    <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                                </a-upload-dragger>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </view>
            </a-form>
        </AntdConfirmModal>
        <!--草稿列表-->
        <DraftDrawer v-if="draftShow" v-model:show="draftShow" :form.sync="form"></DraftDrawer>
    </view>
</template>
<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
// 图标引入
import { InboxOutlined, VerticalAlignBottomOutlined, HistoryOutlined } from '@ant-design/icons-vue';
// 组件 & 函数引入
import { InnerTable, LoginUserCell, Uploader, formDefault, createDraft, DraftDrawer, mergeWith, AntdUserMulSelect } from './index'
// CURD
import { createOne, queryList, deleteOne } from '@/custom/nepu/api/raward';
// HOOKS
import useApp from '@/hooks'
const { $, proxy } = useApp()

// import urlStore from '@/store/modules/httpUrl'

const headerConfig = ref();
// const url = ref(`${urlStore().httpUrl}/disk/upload`)
const formRef = ref(null)
const modalRef = ref(null)
const isCreate = ref(true)
const draftShow = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10
})
// 表单
const form = ref(formDefault);
const signatureGrade = {
    props: { emitPath: false },
    options: [
        { value: "一", label: "第一完成单位" },
        { value: "二", label: "第二完成单位" },
        { value: "三", label: "第三完成单位" },
    ],
};
const total = ref(1)
const tableData = ref([])
const props = defineProps({
    show: {
        type: Boolean,
    },
    viewData: {
        type: Object,
    },
});

//附件上传
const handleChange = info => {
    const status = info.file.status;
    if (status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (status === 'done') {
        message.success(`${info.file.name} 文件上传成功.`);
    } else if (status === 'error') {
        message.error(`${info.file.name} 文件上传失败.`);
    }
};
//确定获奖
function confirmAward(e) {
    form.value.awardDictId = e;
    const tarr = dict.value;

    tarr.forEach((item) => {
        if (item.id == e) {
            awardName.value = item.awardName;
        }
    });
}
function openUploader() {
    isCreate.value = true;
    modalRef.value.openModal()
}
// 记录删除
function handleDelete(id) {
    console.log(id)
    deleteOne(id).then(r => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}
// 修改
function handleUpdate(e) {
    form.value = e
    isCreate.value = false
    modalRef.value.openModal()
}
// 列表查询
function getList() {
    queryList(queryParams.value).then(res => {
        console.log(res)
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}
// 点击暂存
function tapStore() {
    let formId = '科研获奖'
    createDraft({
        formId,
        formJsonStr: JSON.stringify(form.value)
    }).then(r => {
        $.showToast({
            title: '暂存成功',
            icon: 'success'
        })
    })
}
// 展示草稿列表
function showDrafts() {
    //modalRef.value.closeModal();
    draftShow.value = true;
}
function submitForm() {
    console.log(form.value)
    formRef.value.validateFields().then(v => {
        console.log('校验成功')
        createOne(form.value).then(res => {
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            getList()
            form.value = formDefault;
            modalRef.value.closeModal()
        })
    }).catch(e => {
        console.log('校验失败')
    })
}
// function getToken() {
//     headerConfig.value = {
//         token: window.localStorage.getItem("token"),
//     };
// }
// getToken();
getList()
</script>